<script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';

  const imgList = ref([
    {
      name: '重磅！东北师范大学自主研发的教师教育大模型正式发布',
      url: '../../public/pageA_lun1.png',
    },
    {
      name: '东北师范大学获评第三届全国文明校园',
      url: '../../public/pageA_lun2.jpg',
    },
    // {
    //   name: '强师报国守初心，求实创造启新程',
    //   url: '../../public/pageA_lun3.jpg',
    // },
    // {
    //   name: '聆听励志故事 传递榜样力量',
    //   url: '../../public/pageA_lun4.png',
    // },
  ]);
  const imgIndex = ref(0);

  // 按钮切换下一个
  const nextSlide = () => {
    imgIndex.value = (imgIndex.value + 1) % imgList.value.length;
    stopAutoPlay();
    startAutoPlay();
  };

  // 按钮切换上一个
  const prevSlide = () => {
    imgIndex.value = (imgIndex.value - 1 + imgList.value.length) % imgList.value.length;
    stopAutoPlay();
    startAutoPlay();
  };

  // 去到指定
  const goToSlide = index => {
    imgIndex.value = index;
    stopAutoPlay();
    startAutoPlay();
  };

  let autoPlayTimer = null;
  const startAutoPlay = () => {
    autoPlayTimer = setInterval(nextSlide, 5000);
  };

  const stopAutoPlay = () => {
    if (autoPlayTimer) {
      clearInterval(autoPlayTimer);
    }
  };

  onMounted(() => {
    startAutoPlay();
  });

  onBeforeUnmount(() => {
    stopAutoPlay();
  });
</script>

<template>
  <div class="main">
    <div v-for="(img, index) in imgList" :key="index" class="carousel-slide" :class="{ active: imgIndex === index }">
      <img :src="img.url" />
    </div>

    <button class="carousel-control prev" @click="prevSlide">❮</button>
    <button class="carousel-control next" @click="nextSlide">❯</button>

    <div style="position: absolute; bottom: 2rem; right: 20px; width: 100px">
      <div
        style="
          border-radius: 50%;
          width: 10px;
          height: 10px;
          display: inline-block;
          margin: 5px;
          cursor: pointer;
          position: relative;
          z-index: 150;
        "
        :style="{ 'background-color': index === imgIndex ? '#ffffff' : 'rgba(255, 255, 255, 0.3)' }"
        v-for="(img, index) in imgList"
        :key="index"
        v-on:click="goToSlide(index)"
      ></div>
    </div>

    <div class="foot">
      <div
        style="
          position: absolute;
          bottom: 2rem;
          left: 2rem;
          font-size: 1.5rem;
          color: #fff;
          flex: 1;
          overflow: visible;
          white-space: normal;
          font-weight: normal;
          pointer-events: none;
        "
      ></div>
    </div>
  </div>
</template>

<style scoped>
  .main {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .carousel-slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .carousel-slide.active {
    opacity: 1;
  }

  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: transparent;
    border: none;
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 26px;
    width: 80px;
    height: 500px;

    transition: 0.3s;
  }

  .carousel-control:hover {
    color: white;
  }

  .prev {
    left: 20px;
  }

  .next {
    right: 20px;
  }

  .carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
  }

  .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
  }

  .indicator.active {
    background: white;
  }

  .foot {
    height: 20vh;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    position: absolute;
    bottom: 0px;
    z-index: 100;
  }

  .title-group {
    text-align: right;
    color: white;
  }

  .main-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
  }

  .sub-title {
    margin: 5px 0 0;
    font-size: 0.9rem;
    opacity: 0.8;
  }
</style>
